<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box {
				font-size: 200px;
			}
		</style>
	</head>

	<body>
		<!--//判断时分秒；
		//60秒进位1分，秒归零；60分进位1小时候，分归零；24小时进位1天，时间归零；-->

		<div id="box">0:0:0</div>

		<input type="button" name="" id="" value="开始" onclick="kaishi()" />
		<input type="button" name="" id="" value="暂停" onclick="zanting()" />
		<input type="button" name="" id="" value="push" onclick="stop()" />

		<script type="text/javascript">
			var time = 0;
			var shi = 0;
			var fen = 0;
			var id = 0;
			
			function stop () {
			clearInterval(id)
			time=0;
				shi=0;
				fen=0;
				miao=0;
				var str = +shi + ":" + fen + ":" + miao;
						document.getElementById("box").innerHTML = str;
										document.getElementById("box").style.color = "black";

			}

			function zanting() {
				clearInterval(id)
				id = 0;
				document.getElementById("box").style.color = "blue";

			}

			function kaishi() {
				if(id == 0) {
					id = setInterval(function() {
						time++
						var miao = time % 60;
						var fen = parseInt(time / 60) % 60; //分钟超过60归零
						var shi = parseInt(time / 3600);

						var tian = parseInt(time / (3600 * 24));
						
						document.getElementById("box").innerHTML = +shi + ":" + fen + ":" + miao;
						document.getElementById("box").style.color = "red";
					}, 1)
				}

			}
		</script>
	</body>

</html>